<template>
  <div>

    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline"
             style="padding-top: 10px;margin-left: 35px">
      <el-form-item label="ID" prop="listId">
        <el-input v-model="keyword.listId" placeholder="搜索内容"></el-input>
      </el-form-item>
      <el-form-item label="NAME" prop="listName">
        <el-input v-model="keyword.listName" placeholder="模糊搜索"></el-input>
      </el-form-item>

      <!--查询-->
      <el-form-item>
        <el-button type="info" @click="search" size="small" icon="el-icon-search">查询</el-button>
        <el-button type="info" plain @click="resetSearchForm('searchForm')" size="small" icon="el-icon-refresh-right">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <!--增删改查-->
    <el-form :inline="true" :model="keyword" ref="keyword" class="demo-form-inline"
             style="margin-left: 45px;margin-top: 10px">
      <template slot-scope="scope">
        <el-button type="info" size="small" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        <el-button type="info" size="small" plain icon="el-icon-edit" @click="updataMeasure">修改</el-button>
        <el-button type="info" size="small" icon="el-icon-delete" @click="delListBatch">删除</el-button>
        <el-button type="info" size="small" plain icon="el-icon-download">导入</el-button>
        <el-button type="info" size="small" icon="el-icon-upload">导出</el-button>
      </template>
    </el-form>

    <!-- 更新对话框  -->
    <el-dialog title="修改数据" :visible.sync="editFormVisible" width="44%">
      <el-form :model="stashList" :rules="StashRules" ref="StashRulesForm">
        <el-form-item label="ID" prop="listId">
          <el-input v-model="stashList.listId" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="NAME" prop="listName">
          <el-input v-model="stashList.listName" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="属性" prop="listStats">
          <el-input v-model="stashList.listStats" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="listType">
          <el-input v-model="stashList.listType" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editEnter('StashRulesForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--  添加对话框  -->
    <el-dialog title="新增数据" :visible.sync="dialogFormVisible" width="44%">
      <el-form :model="stashList" :rules="StashRules" ref="StashRulesForm">
        <el-form-item label="列表ID" prop="listId">
          <el-input v-model="stashList.listId" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称" prop="listName">
          <el-input v-model="stashList.listName" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="属性" prop="listStats">
          <el-input v-model="stashList.listStats" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="listType">
          <el-input v-model="stashList.listType" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEnter('StashRulesForm')">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 表格数据区域 ref="ids" tooltip-effect="dark"row-key="listId"-->
    <el-table :data="stashListList"  @select-change="handleSelectionChange"  style="width: 100%;margin-bottom: 20px;">
      <el-table-column  type="selection" width="55"></el-table-column>
<!--      <el-table-column prop="listId" label="ID"></el-table-column>-->
      <el-table-column prop="listName" label="仓库名称"></el-table-column>
      <el-table-column prop="listStats" label="属性"></el-table-column>
      <el-table-column prop="listType" sortable label="仓库分类"></el-table-column>
      <el-table-column prop="listKeyong" label="可用量"></el-table-column>
      <el-table-column prop="listDaijian" label="待检量"></el-table-column>
      <el-table-column prop="listFahuo" label="待发货"></el-table-column>
      <el-table-column prop="listCipin" label="次品"></el-table-column>
      <el-table-column prop="listZong" label="总量"></el-table-column>
      <el-table-column sortable prop="listHuozhi" label="货值"></el-table-column>
      <el-table-column prop="listChengben" label="成本"></el-table-column>
      <el-table-column label="操作" align="center" width="115" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            style="color: #773a05"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            style="color: #a41616"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--完整功能分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 5, 7, 10,15,20]"
      :page-size="7"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20"
    >
    </el-pagination>

  </div>
</template>

<script>
import { getList, delStashList, add, edit, delList } from '@/api/stashList'
export default {

  data() {
    return {
      title: '',
      keyword: { // 添加查询关键词对象
        listId: '',
        listName: null
      },
      ids: [],
      stashListList: [],
      currentPage: 1,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: true,
      editFormVisible: false,
      dialogFormVisible: false,
      stashList: {
        listId: '',
        listName: '',
        listType: '',
        listStats: '',
        listKeyong: '',
        listDaijian: '',
        listFahuo: '',
        listCipin: '',
        listZong: ''
      },

    }
  },
  methods: {
    fetchData() { // 获取数据
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        listId: this.keyword.listId,
        listName: this.keyword.listName
      }
      getList(params).then(res => {
        let pageInfo = res.data
        this.loading = false
        this.stashListList = pageInfo.list
        this.total = pageInfo.total
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData() // 重新获取数据
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData() // 重新获取数据
    },
    // 搜索
    search() {
      this.fetchData()
    },
    // 重置
    resetSearchForm(formName) {
      this.$refs[formName].resetFields()
      this.fetchData()
    },
    // ID删除
    handleDelete(row) {
      this.$confirm('是否确认删除编号为' + row.listId + '的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.listId
        }
        delStashList(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 多选框选中数据
    handleSelectionChange(selectionRowArr) {
      // this.ids = selection
      // console.log(this.ids)
      this.ids = [];   // 新增选项前置空
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].listId)
      }
    },
    // 批量删除
    // delListBatch() {
    //   this.$confirm('是否确认删除['+this.ids+']?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     delList({ ids: this.ids.join(',') }).then(res => {
    //       this.$message({
    //         type: 'success',
    //         message: '删除成功!'
    //       });
    //       this.fetchData()
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });
    //   });
    // },


    // 多选框选中数据
    // handleSelectionChange(selection) {
    //   this.ids = [];
    //   // 当selection为空时，ids直接为空数组，避免不必要的操作
    //   this.ids = selection.length > 0 ? selection.map(item => item.listKeyong) : [];
    // },
    // 批量删除
    delListBatch() {
      console.log('Current IDs:', this.ids); // 添加这行来调试
      // 使用模板字符串和数组的join方法构建提示信息
      const idsDisplay = this.ids.join(',');
      this.$confirm(`是否确认删除[${idsDisplay}]?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delList({ ids: this.ids.join(',') }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData();
        }).catch(error => {
          // 添加错误处理逻辑，例如显示错误信息
          this.$message({
            type: 'error',
            message: '删除失败，请稍后重试!'
          });
          console.error('删除失败:', error);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },



    // 修改框
    handleUpdate(row) {
      this.editFormVisible = true
      this.stashList = row
    },
    handleAdd() {
      this.dialogFormVisible = true
    },
    // 新增确认
    addEnter(formName) {
      // 校验固定写法
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 在此处执行添加...
          add(this.stashList).then(res=>{
            this.fetchData();
            this.$message({
              type: 'success',
              message: '添加成功!',
            })
            this.fetchData();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
        this.dialogFormVisible = false;
      });
    },
    // 确认修改
    editEnter(forName) {
      this.$refs[forName].validate((valid) => {
        if (valid) {
          edit(this.stashList).then(res => {
            this.fetchData()
            this.$message({
              type: 'success',
              message: '修改成功!',
            })
          })
        } else {
          return false
        }
        this.editFormVisible = false
      })
    }

  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>

</style>
